/**
* @author {2U}
* @updateTime {2021-8-31}
* @description 调整页面样式
*/
<template>
	<div class="welfareActivities">
		<head-box></head-box>
		<div class="tab-botton">
			<block v-for="(k, v) in list" :key="k.id">
				<div class="views " @click="onEventDetails(k)">
					<div class="title">{{k.moveTitle}}</div>
					<div class="u-flex content-body">
						<div class="img">
							<image :src="k.movePic"></image>
							<span :class="['pos',k.isExchange===1?'':'pos_already']">
								{{ k.isExchange === 1 ? '未' : '已' }}兑换
							</span>
						</div>
						<div class="fuck">
							<!-- <p>{{ k.moveTitle }}</p> -->
							<!-- <p>主办方：{{ k.moveJoinOrg }}</p> -->
							<p>兑换时间: {{ getUpdateDate(k.startTime) }} ~
								{{ getUpdateDate(k.endTime).slice(5,getUpdateDate(k.endTime).length) }} </p>
							<p>兑换方式: {{ k.sendType===1?'邮寄':'线下' }}</p>
							<p v-if="k.sendType !== 1">兑换地点：{{ k.moveAddr }}</p>
							<!-- <p>联系方式：{{ k.linkMobile }}</p> -->
							<!-- <p v-if="k.sendType">邮寄方式：{{ k.sendType === 1 ? '邮寄' : '线下兑换' }}</p> -->

						</div>
					</div>
					<div class="input">
						<p v-if="k.sendType===1" class="u-flex">
							<u-input v-model="k.postAddress" type="textarea" border
								:placeholder="`请输入${k.moveTitle}邮寄地址`">
							</u-input>
							<u-button size="mini" hover-class="none" :custom-style="{
						  marginLeft: '20rpx',
						}" throttle-time="1000" plain @click="onPostAddress(k, v)">保存</u-button>
						</p>
					</div>
				</div>
				<div class="u-border-bottom"></div>
			</block>
		</div>
		<tabs-box></tabs-box>
	</div>
</template>

<script>
	import {
		getMyFLList,
		gpUpdatePostAddress
	} from '@/api/move'
	import {
		getUpdateDate,
		onEventDetails
	} from '@/common/type'
	export default {
		data() {
			return {
				pageNo: 1, //第几页
				pageSize: 10, //每页条数
				list: [], //数据
			}
		},
		onLoad() {
			this.getMyFLList()
		},
		onShow() {
			// #ifdef H5
			console.log('分享')
			this.$wxSetShare()
			// #endif
		},
		mounted() {},
		methods: {
			//活动详情
			onEventDetails({
				id,
				activityCategory
			}) {
				return onEventDetails({
					id,
					activityCategory
				})
			},
			//活动--修改邮寄地址
			onPostAddress({
				id,
				postAddress
			}, index) {
				if (!postAddress.length || !postAddress.trim()) {
					this.$api.msg(`请输入第${index + 1}项的邮寄地址`)
					return
				}
				this.$api.showLoading({
					title: '编辑邮寄地址中'
				})
				gpUpdatePostAddress({
					moveId: id,
					postAddress
				}).then(res => {
					this.$api.hideLoading()
					const {
						code,
						success,
						message
					} = res
					if (code === 200) {
						this.$api.hideLoading()
						this.$api.msg(message)
						this.getMyFLList()
					} else {
						this.$api.msg(message)
					}
				}).catch(e => {
					this.$api.hideLoading()
					this.$api.msg('发送邮寄地址失败')
				})
			},
			//更新时间
			getUpdateDate(e) {
				return getUpdateDate(e).replace(/-/g, ".")
			},
			//我的福利活动列表
			getMyFLList() {
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				getMyFLList(params)
					.then((res) => {
						const {
							code,
							result
						} = res
						if (code === 200) {
							this.list = result
						}
					})
					.catch((e) => {
						console.log(e)
					})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.welfareActivities {
		.tab-botton {
			.views {
				// padding: 36rpx 24rpx 0 20rpx;
				padding: 0 36rpx;

				.title {
					font-weight: bold;
					padding: 20rpx 0;
				}

				.content-body {
					.img {
						width: 180rpx !important;
						height: 224rpx;
						width: 100%;
						position: relative;
						font-size: 0;
						image {
							width: 180rpx;
							height: 224rpx;
							border-radius: 10rpx;
						}

						.pos {
							position: absolute;
							top: 0;
							left: 0;
							width: 100rpx;
							height: 39rpx;
							line-height: 39rpx;
							background: #f0ad4e;
							opacity: 0.9;
							border-radius: 10rpx;
							text-align: center;
							color: #ffffff;
							font-size: 24rpx;

							&_already {
								background: #4cd964;
							}
						}

						.code {
							min-width: 172rpx;
							height: 38rpx;
							background: #ff9435;
							border-radius: 19rpx;
							text-align: center;
							margin-top: 27rpx;
							white-space: nowrap;
							padding: 6rpx;

							span {
								width: auto;
								height: 23rpx;
								font-size: 24rpx;
								font-family: PingFang;
								font-weight: 400;
								color: #ffffff;
							}
						}
					}

					.fuck {

						// padding-left: 42rpx;
						p {
							// &:nth-child(1) {
							// 	font-size: 32rpx;
							// 	font-family: PingFang;
							// 	font-weight: 500;
							// 	color: #222222;
							// 	line-height: 44rpx;
							// }

							// font-size: 26rpx;
							padding-left: 12rpx;
							font-size: 20rpx;
							font-family: PingFang;
							font-weight: 400;
							color: #666666;
							line-height: 60rpx;

							.bold {
								font-weight: bold;
							}
						}
					}
				}

				.input {
					margin-top: 20rpx;
				}
			}

			.u-border-bottom {
				margin: 40rpx 14rpx 35rpx 13rpx;
			}
		}
	}
</style>
